<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"

      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="cesdiForm" enctype="multipart/form-data">
                <h1 class="title">Escrituras de Separacao, Divorcios e Inventarios</h1>
                <p:growl id="messages" showDetail="true" autoUpdate="true" /> 
                <div class="row">
                    <div class="twelve columns"> 
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Cadastro</h4></legend>
                            <p:panel id="charterPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">

                                <p:outputLabel value="Tipo Ato: " styleClass="grid_3"/>
                                <p:autoComplete styleClass="grid_8" style="width: 28.44%"
                                                dropdown="true" converter="actcepconverter"   
                                                var="actCepValue" itemLabel="#{actCepValue.description}" 
                                                scrollHeight="200"
                                                itemValue="#{actCepValue}" value="#{managerSearchCesdi.charterEdit.actCep}"
                                                completeMethod="#{managerActCep.autocomplete}" />  

                                <p:outputLabel value="Reg. Bens " styleClass="grid_5"/>
                                <div class="grid_8">
                                    <p:selectOneMenu value="#{managerSearchCesdi.charterEdit.propertySystem}" style="width:100%;" >    
                                        <f:selectItem itemLabel=" " />  
                                        <f:selectItems value="#{managerSearchCesdi.enumPropertySystem()}" />  
                                    </p:selectOneMenu>
                                </div>

                                <p:outputLabel value="Data Ato: " styleClass="grid_3"/>
                                <p:calendar showOn="button" styleClass="grid_8" style="width:32.44%"
                                            value="#{managerSearchCesdi.charterEdit.dateAct}"/>

                                <p:outputLabel value="Data Casamento: " styleClass="grid_4"/>
                                <p:calendar showOn="button" styleClass="grid_8" style="width:32.44%"
                                            value="#{managerSearchCesdi.charterEdit.dateMarried}"/>

                                <div class="clear"/>

                                <p:outputLabel value="Livro: " styleClass="grid_3" />
                                <p:inputMask mask="?999999999"  placeHolder=""  styleClass="grid_8" value="#{managerSearchCesdi.charterEdit.book}"/>

                                <p:outputLabel value="Livro Compl.: " styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerSearchCesdi.charterEdit.bookComp}"/> 

                                <div class="clear"/>

                                <p:outputLabel value="Folha: " styleClass="grid_3" />
                                <p:inputMask mask="?999999999"  placeHolder=""  styleClass="grid_8" value="#{managerSearchCesdi.charterEdit.leaf}"/> 

                                <p:outputLabel value="Folha Compl.: " styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" value="#{managerSearchCesdi.charterEdit.leafComp}"/> 

                                <div class="clear"/>

                                <p:outputLabel value="Filhos Adultos" styleClass="grid_3" />
                                <p:inputMask mask="?999999999"  placeHolder=""  styleClass="grid_8" value="#{managerSearchCesdi.charterEdit.book}"/>


                                <div class="clear"/>
                                <p:outputLabel value="Objeto: " styleClass="grid_3"/>
                                <p:inputTextarea cols="100" rows="4" 
                                                 styleClass="grid_20" value="#{managerSearchCesdi.charterEdit.description}"/> 
                            </p:panel>

                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Partes</h4></legend>

                            <p:panel id="partsPanel" style="background: none; border: none;" styleClass="container_24 clearfix ">

                                <p:outputLabel value="Pessoa: "  styleClass="grid_3"/>
                                <p:selectOneRadio id="typePerson" style="margin-top:-8px;" styleClass="grid_8"
                                                  value="#{managerSearchCesdi.peopleEdit.tipoDocumento}" >  
                                    <f:selectItems value="#{managerSearchCesdi.typeDocumentList()}" />
                                    <p:ajax event="change" update=":cesdiForm:partsPanel" 
                                            listener="#{managerSearchCesdi.typeDocumentPeople}" />
                                </p:selectOneRadio>

                                <div class="clear"/>

                                <p:outputLabel id="typeDocumentLabel" 
                                               value="#{managerSearchCesdi.peopleEdit.tipoDocumento}: " 
                                               styleClass="grid_3"/>

                                <p:inputMask id="typeDocumentInput" 
                                             value="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF' ? 
                                                      managerSearchCesdi.peopleEdit.cpf : managerSearchCesdi.peopleEdit.cnpj}"
                                             rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'OAB' ? false:true}"
                                             mask="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF' ? 
                                                     '999.999.999-99':'99.999.999/9999-99'}"
                                             styleClass="grid_8"  > 
                                    <p:ajax event="blur" update=":cesdiForm:partsPanel" 
                                            onstart="bui.show()" oncomplete="bui.hide()"
                                            listener="#{managerSearchCesdi.ajaxVerifyPeopleExistEdit()}" />
                                </p:inputMask>

                                <p:blockUI block=":cesdiForm:partsPanel" widgetVar="bui" > 
                                    <p:graphicImage value="media/css/images/ajax-loader.gif"/>
                                </p:blockUI> 

                                <p:inputText styleClass="grid_8" 
                                             rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'OAB'}"
                                             value="#{managerSearchCesdi.peopleEdit.OAB}"/> 

                                <div class="clear"/>

                                <p:outputLabel value="Nome:" styleClass="grid_3" />
                                <p:inputText styleClass="grid_20" 
                                             value="#{managerSearchCesdi.peopleEdit.name}"/> 

                                <div class="clear"/>

                                <p:outputLabel value="UF:"  rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'OAB'}" styleClass="grid_3" />

                                <p:inputText styleClass="grid_8" value="#{managerSearchCesdi.peopleEdit.UFOAB}" rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'OAB'}"/>

                                <div class="clear"/>

                                <p:outputLabel value="RG: " rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" styleClass="grid_3"/>
                                <p:inputText styleClass="grid_8" rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" value="#{managerSearchCesdi.peopleEdit.rg}"/> 

                                <p:outputLabel value="Orgão emissor: " rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" styleClass="grid_4"/>
                                <p:inputText styleClass="grid_8" rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" value="#{managerSearchCesdi.peopleEdit.organ}"/> 

                                <div class="clear"/>

                                <p:outputLabel value="Data nasc: " rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" styleClass="grid_3"/>
                                <p:calendar showOn="button" styleClass="grid_8" rendered="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF'}" style="width:32.44%" 
                                            value="#{managerSearchCesdi.peopleEdit.nasc}"/> 

                                <p:outputLabel value="Qualidade: " 
                                               styleClass="#{managerSearchCesdi.peopleEdit.tipoDocumento.type eq 'CPF' ? 'grid_4':'grid_3'}"/>
                                <p:autoComplete styleClass="grid_8" style="width: 28.44%" dropdown="true" converter="qualityconverter"   
                                                var="qualityValue" itemLabel="#{qualityValue.description}" scrollHeight="200"
                                                itemValue="#{qualityValue}" value="#{managerSearchCesdi.partEdit.partQuality}"
                                                completeMethod="#{managerSearchCesdi.autocompleteQuality}" />

                                <div class="clear"/>
                                <fieldset>
                                    <legend> <h4 style="font-size: 10px;margin:0 0 10px 0">Local de Nascimento</h4></legend>
                                    <div class="clear"/>
                                    <p:outputLabel value="Estado: " styleClass="grid_3"/>
                                    <p:autoComplete styleClass="grid_8" style="width: 28.44%" dropdown="true" converter="cityconverter"   
                                                    var="cityValue" itemLabel="#{cityValue.name}" value="#{managerSearchCesdi.peopleEdit.localNascimentoUF}"
                                                    itemValue="#{cityValue}" scrollHeight="200"
                                                    completeMethod="#{managerActCep.autocompleteCity}" /> 


                                    <p:outputLabel value="Pais: " styleClass="grid_4"/>
                                    <p:inputText  styleClass="grid_8" value="#{managerSearchCesdi.peopleEdit.localNascimentoPais}" />
                                </fieldset>
                                <div class="clear"/>
                                <fieldset>
                                    <legend> <h4 style="font-size: 10px;margin:0 0 10px 0">Local de Residencia</h4></legend>
                                    <div class="clear"/>
                                    <p:outputLabel value="Cidade: " styleClass="grid_3"/>
                                    <p:autoComplete styleClass="grid_8" style="width: 28.44%" dropdown="true" converter="cityconverter"   
                                                    var="cityValue" itemLabel="#{cityValue.name}" value="#{managerSearchCesdi.peopleEdit.localResidenciaMunicipio}"
                                                    itemValue="#{cityValue}" scrollHeight="200"
                                                    completeMethod="#{managerActCep.autocompleteCity}" /> 
                                    <p:outputLabel value="Estado: " styleClass="grid_5"/>
                                    <p:autoComplete styleClass="grid_8" style="width: 28.44%" dropdown="true" converter="countryconverter"   
                                                    var="countryValue" itemLabel="#{countryValue.name}"  value="#{managerSearchCesdi.peopleEdit.localResidenciaUF}"
                                                    forceSelection="true"
                                                    itemValue="#{countryValue}" scrollHeight="200" 
                                                    completeMethod="#{managerCountry.countrys}" /> 
                                    <div class="clear"/>
                                    <p:outputLabel value="Pais: " styleClass="grid_3"/>
                                    <p:inputText  styleClass="grid_8" value="#{managerSearchCesdi.peopleEdit.localResidenciaPais}" />
                                </fieldset>

                                <div class="buttonAction">
                                    <p:commandButton value="Adicionar" actionListener="#{managerSearchCesdi.addPartsEdit()}"
                                                     icon="ui-icon-plus"
                                                     process="@this, :cesdiForm:partsPanel, 
                                                     :cesdiForm:dataTableParts"
                                                     update=":cesdiForm:partsPanel, 
                                                     :cesdiForm:dataTableParts" styleClass="ui-priority-primary" />
                                    <p:commandButton value="Limpar"  icon="ui-icon-trash" />
                                </div>


                                <p:dataTable value="#{managerSearchCesdi.charterEdit.parts}" rowIndexVar="rowid"
                                             emptyMessage="Nenhum registro encontrado"
                                             id="dataTableParts" var="partTable">
                                    <f:facet name="header">
                                        Partes
                                    </f:facet>
                                    <p:column headerText="Nome" width="550">
                                        #{partTable.people.name}
                                    </p:column>

                                    <p:column headerText="Documento">
                                        #{partTable.people.cpf}
                                        #{partTable.people.cnpj}
                                        #{partTable.people.OAB.toString().concat('-')}#{partTable.people.UFOAB}
                                    </p:column>

                                    <p:column headerText="Qualidade">
                                        #{partTable.partQuality.description}
                                    </p:column>
                                    <p:column headerText="Ação">
                                        <p:commandButton  style="width: 20px; height: 20px;" 
                                                          process="@this, :cesdiForm:dataTableParts"
                                                          update=":cesdiForm:dataTableParts"
                                                          actionListener="#{managerSearchCesdi.removePart(rowid)}"
                                                          icon="ui-icon-trash"/>
                                    </p:column>

                                </p:dataTable>

                            </p:panel>
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Selos</h4></legend>

                            <p:panel id="stampPanel" 
                                     style="background: none; border: none;" styleClass="container_24 clearfix ">

                                <p:outputLabel value="Série: "   styleClass="grid_3"/>
                                <p:inputText  styleClass="grid_8" value="#{managerSearchCesdi.stampEdit.serie}"/> 

                                <p:outputLabel value="Número: "  styleClass="grid_4"/>
                                <p:inputText  styleClass="grid_8" value="#{managerSearchCesdi.stampEdit.number}"/> 

                                <p:outputLabel value="Tipo Selo: "  styleClass="grid_3" />
                                <p:autoComplete styleClass="grid_8" style="width: 28.44%" dropdown="true"
                                                converter="typestampconverter"   
                                                value="#{managerSearchCesdi.typeStampObjEdit}"
                                                var="typeStampValue" itemLabel="#{typeStampValue.name}" 
                                                itemValue="#{typeStampValue}"
                                                completeMethod="#{managerTypeStamp.autoComplete}" >

                                    <p:column style="width:20%;text-align:center;background-color: \##{typeStampValue.color};">  
                                    </p:column>  

                                    <p:column style="width:80%">  
                                        #{typeStampValue.name} 
                                    </p:column>
                                </p:autoComplete>

                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton value="Adicionar" actionListener="#{managerSearchCesdi.addStampsEdit()}"
                                                     icon="ui-icon-plus" 
                                                     process="@this, :cesdiForm:stampPanel, 
                                                     :cesdiForm:dataTableStamps"
                                                     update=":cesdiForm:stampPanel, 
                                                     :cesdiForm:dataTableStamps" styleClass="ui-priority-primary" />
                                    <p:commandButton value="Limpar"  icon="ui-icon-trash" />
                                </div>

                                <p:dataTable id="dataTableStamps"
                                             value="#{managerSearchCesdi.charterEdit.stamp}"
                                             var="stampTable"
                                             rowIndexVar="rowIdStamp"
                                             emptyMessage="Nenhum registro encontrado" >
                                    <f:facet name="header">
                                        Selos
                                    </f:facet>
                                    <p:column headerText="Série">
                                        #{stampTable.serie}
                                    </p:column>
                                    <p:column headerText="Número">
                                        #{stampTable.number}
                                    </p:column>
                                    <p:column headerText="Tipo">
                                        #{stampTable.typeStamp.name}
                                    </p:column>
                                    <p:column headerText="Ação" width="20">
                                        <p:commandButton  style="width: 20px; height: 20px;" 
                                                          process="@this, :cesdiForm:dataTableStamps"
                                                          update=":cesdiForm:dataTableStamps"
                                                          actionListener="#{managerSearchCesdi.removeStamp(rowIdStamp)}"
                                                          icon="ui-icon-trash"/>
                                    </p:column>
                                </p:dataTable>
                            </p:panel>
                        </fieldset>
                        <br/>

                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Anexos</h4></legend>


                            <p:fileUpload 
                                mode="advanced"  
                                label="Anexar"
                                fileUploadListener="#{managerSearchCesdi.handle}"
                                multiple="true" 
                                auto="true"
                                invalidFileMessage="Tipo de arquivo não suportado."
                                invalidSizeMessage="Tamanho do arquivo não é suportado"
                                uploadLabel="Enviar"
                                cancelLabel="Cancelar"
                                update="annexPanel,messages"
                                allowTypes="/(\.|\/)(gif|tif|tiff|jpe?g|png|pdf)$/"/> 

                            <p:panel id="annexPanel" 
                                     style="background: none; border: none;" styleClass="container_24 clearfix ">

                                <ui:repeat  value="#{managerSearchCesdi.charterEdit.annex}" var="a">
                                    <h:outputLink  
                                        value="#{a.type ne 'application/pdf' ? 'viewImage':'show'}" title="#{a.description}"  target="_blank" >

                                        <div style="text-align: center; width: 20%;  height:220px;" class="grid_4">

                                            <p:graphicImage styleClass="image grid_3" rendered="#{a.type ne 'application/pdf'}"
                                                            style="margin-left:1%; width: 100px;"
                                                            url="show/?annex=#{a.id}" />

                                            <p:outputLabel  value="#{a.description.length() ge 10 ? a.description.substring(0, 10).concat('...') : 
                                                                     a.description.replace('.png','').replace(' ','_')}" 
                                                            style="margin-left:1%; width: 100px;" rendered="#{a.type ne 'application/pdf'}"/>

                                            <p:graphicImage styleClass="image grid_3" rendered="#{a.type eq 'application/pdf'}"
                                                            style="margin-left:1%; width: 100px;" 
                                                            url="assets/images/pdf.jpeg" />



                                            <div class="grid_20">
                                                <p:outputLabel  value="#{a.description.length() ge 10 ? a.description.substring(0, 10).concat('...') : 
                                                                         a.description.replace('.pdf','').replace(' ','_')}" 
                                                                styleClass="grid_18" rendered="#{a.type eq 'application/pdf'}"/>
                                            </div>
                                            <p:commandButton icon="ui-icon-close" style="height:30px;"
                                                             label="Remover Anexo"
                                                             oncomplete="dlgExcluirAnexo.show();"
                                                             actionListener="#{managerSearchCesdi.removeAnnexAux(a)}"
                                                             value="Remover" styleClass="grid_15"/>
                                        </div>
                                        <f:param name="annex" value="#{a.id}"/>
                                    </h:outputLink>
                                </ui:repeat>
                            </p:panel>
                        </fieldset>    


                        <div class="buttonAction">
                            <p:commandButton value="Atualizar" icon="ui-icon-disk"
                                             process="@form" update="@form"
                                             actionListener="#{managerSearchCesdi.edit()}" styleClass="ui-priority-primary" />
                            <p:commandButton value="Cancelar"  icon="ui-icon-trash" />
                        </div >
                    </div>
                </div>
                <p:dialog header="Exclusão de Anexo" widgetVar="dlgExcluirAnexo" modal="true"
                          showEffect="fade" hideEffect="fade" resizable="false" height="70">  
                    <h:outputText value="Deseja Excluir o Anexo ?" /> <br/> 
                    <f:facet name="footer">
                        <center>
                            <p:commandButton value="Sim" icon="ui-icon-check"
                                             update=":cesdiForm:annexPanel" oncomplete="dlgExcluirAnexo.hide();"
                                             actionListener="#{managerSearchCesdi.removeAnnex()}"  />

                            <p:commandButton value="Não" icon="ui-icon-close"
                                             onclick="dlgExcluirAnexo.hide();"  />
                        </center>
                    </f:facet>

                </p:dialog>
            </h:form>
        </ui:define>
    </ui:composition>

</html>